<template>
  <div class="idx-json-content">
    <div class="json-handle">
      <el-button type="primary" size="small" @click="compressJson">JSON压缩</el-button>
      <el-button type="primary" size="small" @click="transformLineJson">key驼峰转下划线</el-button>
      <el-button type="primary" size="small" @click="transformHumpJson">key下划线转驼峰</el-button>
      <el-button type="primary" size="small" @click="dialogVisible = true">JSON转JAVA实体</el-button>
      <el-dialog title="填写相关信息" :visible.sync="dialogVisible">
        <el-form>
          <el-form-item label="类名" label-width="10rem">
            <el-input v-model="className" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包名" label-width="10rem">
            <el-input v-model="packageName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false;transformJavaBean()">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <div class="json-content">
      <json-editor
        v-model="json"
        :showBtns="false"
        :mode="'code'"
        lang="zh"
        :expandedOnStart="true"
        @json-change="onJsonChange"
        @json-save="onJsonSave"
        @has-error="onError"
        class="json-editor"
      />
      <el-input type="textarea" class="json-str" v-model="jsonStr" readonly/>
    </div>
  </div>

</template>
<script>
import jsonEditor from 'vue-json-editor'
import { jsonToUnderline, jsonToHump } from '@/utils/jsonUtils'
import { getBeanFieldFromJson, toBeanText } from '@/utils/java2pojoUtils'
export default {

  components: { jsonEditor },
  data() {
    return {
      jsonStr: '',
      json: {},
      className: 'MyJavaBean',
      packageName: 'com.xxx.entity',
      dialogVisible: false,
    }
  },
  mounted() {
    let str = localStorage.getItem("idx-json-str")
    if(str === null || str === undefined) {
      this.json =  {}
      return
    }
    this.json = JSON.parse(str)
    this.jsonStr = str
  },
  methods: {
    compressJson() {
      this.jsonStr = JSON.stringify(this.json)
    },
    transformLineJson() {
      let temp = JSON.parse(JSON.stringify(this.json))
      jsonToUnderline(temp)
      this.jsonStr = JSON.stringify(temp,null,2)
    },
    transformHumpJson() {
      let temp = JSON.parse(JSON.stringify(this.json))
      jsonToHump(temp)
      this.jsonStr = JSON.stringify(temp,null,2)
    },
    transformJavaBean() {
      let bean = getBeanFieldFromJson(this.jsonStr, this.className, undefined, undefined)
      this.jsonStr = toBeanText(bean, this.packageName)
    },
    onJsonChange(value) {
      this.jsonStr = JSON.stringify(value,null,2)
      localStorage.setItem("idx-json-str", this.jsonStr)
    },
    onJsonSave(value) {

    },
    onError(value) {
      this.jsonStr = value.message
    }
  }
}
</script>

<style>

.idx-json-content{
  margin: 1rem;
  width: 122rem;
}

.json-handle > *{
  margin-right: 1rem;
}

.el-tag {
  cursor: pointer;
}

.json-content {
  width: 122rem;
  height: 60rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.json-str, .json-str > textarea {
  width: 60rem;
  height: 58rem;
}

.json-editor, .jsoneditor-vue {
  width: 60rem;
  height: 58rem;
}

/*隐藏插件外链*/
.jsoneditor-poweredBy{
  display: none;
}
</style>
